Tauchen Sie tief in die Auto-Placement-Funktionen von CSS Grid ein, lernen Sie die Elementpositionierung zu steuern, verschiedene Algorithmen zu verstehen und dynamische Layouts für ein globales Publikum zu erstellen.
CSS Grid Auto-Placement: Meisterung der Algorithmen zur automatischen Elementpositionierung
CSS Grid ist ein leistungsstarkes Layout-System, das es Entwicklern ermöglicht, komplexe und flexible Layouts mit Leichtigkeit zu erstellen. Ein Hauptmerkmal von CSS Grid sind seine Auto-Placement-Fähigkeiten, die Grid-Elemente automatisch innerhalb des Grid-Containers positionieren. Diese Funktion ist unglaublich nützlich für die Erstellung dynamischer und responsiver Layouts, insbesondere wenn die Anzahl der Elemente oder ihre Größen im Voraus unbekannt sind. Dieser Blogbeitrag wird sich eingehend mit den Feinheiten des CSS Grid Auto-Placement befassen und die verschiedenen Algorithmen, Eigenschaften und praktische Beispiele behandeln, um Ihnen zu helfen, diesen wesentlichen Aspekt des Web-Layout-Designs für ein globales Publikum zu meistern.
Grundlagen von CSS Grid verstehen
Bevor wir uns mit der automatischen Platzierung befassen, wollen wir kurz die Grundlagen von CSS Grid zusammenfassen. Ein Grid-Layout wird durch die Definition eines Grid-Containers und seiner Grid-Elemente erstellt. Der Grid-Container ist das übergeordnete Element, das als Grid fungiert, und die Grid-Elemente sind seine untergeordneten Elemente, die innerhalb der Zeilen und Spalten des Grids angeordnet werden.
Wichtige Eigenschaften, die es zu verstehen gilt, sind:
display: grid;oderdisplay: inline-grid;: Diese Eigenschaft, die auf den Container angewendet wird, macht ihn zu einem Grid-Container.grid-template-columnsundgrid-template-rows: Diese Eigenschaften definieren die Größe der Spalten bzw. Zeilen des Grids. Werte können in Pixeln (px), Prozent (%), Bruchteilen (fr) oder anderen gültigen CSS-Einheiten angegeben werden.grid-column-start,grid-column-end,grid-row-startundgrid-row-end: Diese Eigenschaften ermöglichen es Ihnen, Grid-Elemente explizit zu positionieren, indem Sie deren Start- und Endlinien angeben.grid-area: Eine Kurzform-Eigenschaft, diegrid-row-start,grid-column-start,grid-row-endundgrid-column-endkombiniert.
Die Stärke der automatischen Platzierung
Die automatische Platzierung ist der Mechanismus, durch den CSS Grid Grid-Elemente automatisch positioniert, wenn ihre explizite Platzierung (unter Verwendung von Eigenschaften wie grid-column-start oder grid-row-start) nicht definiert ist. Dies ist unglaublich nützlich, wenn die Anzahl der Grid-Elemente dynamisch ist oder wenn Sie möchten, dass sich das Layout nahtlos an verschiedene Bildschirmgrößen oder Inhaltsvarianten anpasst. Der Auto-Placement-Algorithmus analysiert die Struktur des Grid-Containers, alle vorhandenen Elementplatzierungen und den verfügbaren Platz, um die Position jedes Elements zu bestimmen.
Die Auto-Placement-Algorithmen
CSS Grid bietet verschiedene Algorithmen zur automatischen Platzierung, die hauptsächlich durch die Eigenschaft grid-auto-flow gesteuert werden. Das Verständnis dieser Algorithmen ist entscheidend, um zu kontrollieren, wie Ihre Grid-Elemente angeordnet werden.
grid-auto-flow: row; (Standard)
Dies ist der Standardwert. Die Elemente werden Zeile für Zeile platziert. Wenn in der aktuellen Zeile nicht genügend Platz vorhanden ist, werden die Elemente automatisch in die nächste Zeile umgebrochen. Stellen Sie es sich so vor, als würden Sie eine horizontale Reihe von Kästen füllen und dann auf die folgenden Zeilen darunter überlaufen. Dies ist im Allgemeinen das häufigste und vorhersehbarste Verhalten.
Beispiel:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row; /* Standard */
}
Mit dieser Konfiguration füllen die Elemente die Grid-Spalten horizontal und werden nach der dritten Spalte in die nächste Zeile umgebrochen. Dies ist ein guter Ausgangspunkt für viele Layouts, wie z. B. eine Produktliste auf einer E-Commerce-Website.
grid-auto-flow: column;
Dieser Algorithmus platziert Elemente Spalte für Spalte. Wenn in der aktuellen Spalte nicht genügend Platz ist, werden die Elemente in die nächste Spalte nach rechts verschoben. Dies ist weniger verbreitet, aber für bestimmte Layouts nützlich.
Beispiel:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-auto-flow: column;
}
In diesem Fall füllen die Elemente das Grid, indem sie jede Spalte von oben nach unten ausfüllen und anschließend zur nächsten verfügbaren Spalte wechseln.
grid-auto-flow: row dense; und grid-auto-flow: column dense;
Das Schlüsselwort dense modifiziert das Verhalten der automatischen Platzierung. Mit dense versucht der Grid-Algorithmus, Lücken im Grid zu füllen, indem er Elemente neu anordnet. Dies kann zu einem kompakteren Layout führen, aber es kann auch die visuelle Reihenfolge Ihrer Elemente ändern, wenn Sie nicht aufpassen. Verwenden Sie dies mit Vorsicht und berücksichtigen Sie die Auswirkungen auf die Barrierefreiheit.
Beispiel:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row dense;
}
.item-one {
grid-column: span 2;
}
In diesem Beispiel erstreckt sich item-one über zwei Spalten und erzeugt eine Lücke. Das Schlüsselwort dense wird versuchen, diese Lücke mit nachfolgenden Elementen zu füllen. Dieser Ansatz kann manchmal zu unerwarteten Ergebnissen führen, insbesondere wenn die Reihenfolge der Inhalte wichtig ist, wie bei textlastigen Layouts. Berücksichtigen Sie bei der Verwendung von `dense` die Barrierefreiheit und die Reihenfolge für Screenreader.
Steuerung der automatischen Platzierung mit Grid-Eigenschaften
Während grid-auto-flow die allgemeine Richtung und Dichte der automatischen Platzierung steuert, beeinflussen mehrere andere Grid-Eigenschaften die Positionierung der Elemente.
grid-template-columns und grid-template-rows
Die Abmessungen der Spalten und Zeilen des Grids wirken sich direkt auf die automatische Platzierung aus. Definieren Sie diese Abmessungen sorgfältig, um das gewünschte Layout zu erzielen. Sie können feste Einheiten (px), relative Einheiten (%) oder flexible Einheiten (fr) verwenden.
Beispiel (Verwendung von fr-Einheiten für responsive Spalten):
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive Spalten */
grid-auto-flow: row;
}
Dieses Beispiel verwendet auto-fit (später erklärt), um responsive Spalten zu erstellen, die sich an den verfügbaren Platz anpassen. Jede Spalte wird mindestens 200px breit sein (minmax(200px, 1fr)) und wachsen, um den verfügbaren Platz auszufüllen. Dieser Ansatz ist auf verschiedenen Bildschirmgrößen breit anwendbar.
grid-column und grid-row (und ihre Kurzform, grid-area)
Diese Eigenschaften definieren explizit die Start- und Endlinien eines Grid-Elements. Wenn Sie diese Eigenschaften angeben, wird der Auto-Placement-Algorithmus diese Positionen respektieren. Auf diese Weise können Sie die Platzierung teilweise steuern, während Sie die automatische Platzierung für die übrigen Elemente zulassen. Denken Sie daran, dass das Verständnis dafür für die Erstellung flexibler Designs entscheidend ist.
Beispiel:
.item-one {
grid-column: 1 / 3; /* Erstreckt sich über die Spalten 1 und 2 */
}
In diesem Beispiel wird item-one explizit platziert, und andere Elemente werden unter Verwendung von grid-auto-flow und dem verfügbaren Platz im Grid-Container um es herum platziert.
grid-auto-columns und grid-auto-rows
Diese Eigenschaften definieren die Größe von implizit erstellten Grid-Spalten und -Zeilen. Wenn der Grid-Algorithmus Elemente außerhalb der explizit definierten Grid-Vorlage platziert, generiert er implizite Spuren (Tracks). grid-auto-columns und grid-auto-rows steuern die Größe dieser impliziten Spuren.
Beispiel:
.grid-container {
display: grid;
grid-template-columns: 100px 200px;
grid-auto-columns: 150px; /* Größe der impliziten Spalte */
}
Wenn im Grid-Container Elemente in Spalten platziert werden, die über die zwei explizit definierten hinausgehen, werden alle neu erstellten Spalten 150px breit sein.
Praktische Beispiele und Anwendungsfälle
Lassen Sie uns einige praktische Beispiele untersuchen, wie die automatische Platzierung in realen Szenarien verwendet wird:
1. Responsive Produktliste
Ein häufiger Anwendungsfall ist die Erstellung einer responsiven Produktliste. Sie möchten, dass sich die Elemente automatisch in einem Grid anordnen und sich an verschiedene Bildschirmgrößen anpassen.
HTML (Einfache Produktelemente):
<div class="product-grid">
<div class="product-item">
<img src="product1.jpg" alt="Produkt 1">
<h3>Produkt 1</h3>
<p>Beschreibung von Produkt 1.</p>
</div>
<div class="product-item">
<img src="product2.jpg" alt="Produkt 2">
<h3>Produkt 2</h3>
<p>Beschreibung von Produkt 2.</p>
</div>
<!-- Weitere Produktelemente -->
</div>
CSS (Verwendung von auto-fit und minmax):
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px; /* Fügt Abstand zwischen den Grid-Elementen hinzu */
}
.product-item {
border: 1px solid #ccc;
padding: 10px;
}
In diesem Beispiel erstellt repeat(auto-fit, minmax(250px, 1fr)) Spalten, die mindestens 250px breit sind. Mit zunehmender Bildschirmgröße passen mehr Spalten in den Container. Wenn der Bildschirm schrumpft, werden die Spalten gestapelt, um in den verfügbaren Platz zu passen. Dies ist eine einfache, aber effektive Methode, um ein responsives Produkt-Grid zu erstellen, das sich dynamisch an verschiedene Geräte anpasst und so weltweit eine gute Benutzererfahrung gewährleistet.
2. Dynamische Bildergalerie
Ein weiterer Anwendungsfall ist die Erstellung einer dynamischen Bildergalerie, in der Bilder unterschiedlicher Größe in einem Grid angeordnet sind. Sie möchten nicht jedes Bild explizit positionieren; Sie möchten, dass das Grid das Layout automatisch handhabt.
HTML (Bildelemente):
<div class="image-gallery">
<img src="image1.jpg" alt="Bild 1">
<img src="image2.jpg" alt="Bild 2">
<img src="image3.jpg" alt="Bild 3">
<!-- Weitere Bildelemente -->
</div>
CSS (Einfaches Grid-Layout):
.image-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-auto-rows: 100px; /* Standard-Zeilenhöhe festlegen */
gap: 10px;
}
.image-gallery img {
width: 100%; /* Sicherstellen, dass Bilder die Gitterzelle füllen */
height: 100%;
object-fit: cover; /* Wichtig zur Beibehaltung des Seitenverhältnisses */
}
In diesem Beispiel stellt der Stil object-fit: cover; sicher, dass die Bilder ihr Seitenverhältnis beibehalten, während sie in ihre Gitterzellen passen. Die Eigenschaft grid-auto-rows gibt eine Basishöhe für die Grid-Elemente vor. Das Schlüsselwort auto-fit passt die Anzahl der Spalten automatisch an die Containerbreite an. Dieses Beispiel funktioniert bei guter Anwendung global und bietet dem Benutzer eine visuell ansprechende und flexible Bildergalerie. Erwägen Sie die Verwendung einer Bibliothek oder eines Präprozessors für optimierte Bildgrößen, insbesondere für ein internationales Publikum mit unterschiedlichen Bandbreiten.
3. Inhaltsorientiertes Layout
Sie können ein inhaltsorientiertes Layout erstellen, bei dem der Hauptinhalt zuerst platziert wird, gefolgt von verwandten Inhalten oder Seitenleisten. Mit CSS Grid können Sie die Reihenfolge der Inhalte mit `grid-column` oder `grid-row` steuern und gleichzeitig ein responsives Layout beibehalten.
HTML (Einfaches Layout):
<div class="content-container">
<div class="main-content">
<h2>Hauptinhalt</h2>
<p>Dies ist der Hauptinhalt der Seite...</p>
</div>
<div class="sidebar">
<h3>Seitenleiste</h3>
<p>Verwandte Inhalte, Anzeigen oder Navigation...</p>
</div>
</div>
CSS (Anordnung von Inhalten mit Grid):
.content-container {
display: grid;
grid-template-columns: 1fr 300px; /* Zwei Spalten */
gap: 20px;
}
.main-content {
grid-column: 1; /* Bleibt in der ersten Spalte */
}
.sidebar {
grid-column: 2; /* Bleibt in der zweiten Spalte */
}
/* Responsive Anpassung für kleinere Bildschirme */
@media (max-width: 768px) {
.content-container {
grid-template-columns: 1fr; /* Spalten auf kleineren Bildschirmen stapeln */
}
.sidebar {
grid-column: 1; /* Seitenleiste unter dem Hauptinhalt platzieren */
}
}
Dieser Ansatz stellt sicher, dass der `main-content` immer zuerst in der HTML-Quellreihenfolge erscheint, was für Barrierefreiheit und SEO vorteilhaft ist. Auf größeren Bildschirmen sind sie nebeneinander; auf kleineren stapeln sie sich vertikal. Dies ist global relevant, insbesondere unter Berücksichtigung von Mobile-First-Designprinzipien.
auto-fit vs. auto-fill
Sowohl auto-fit als auch auto-fill sind Schlüsselwörter, die in den Eigenschaften grid-template-columns und grid-template-rows verwendet werden, um responsive Grids zu erstellen. Sie verhalten sich ähnlich, aber mit einem feinen Unterschied:
auto-fit: Die Grid-Elemente dehnen sich aus, um den verfügbaren Platz auszufüllen. Wenn nicht genügend Elemente vorhanden sind, um alle Spalten zu füllen, werden die leeren Spalten eingeklappt.auto-fill: Das Grid erstellt leere, implizite Spalten (oder Zeilen), um den verfügbaren Platz zu füllen. Die Elemente dehnen sich nicht aus, um den Platz zu füllen.
Betrachten Sie Folgendes, um den Unterschied zu demonstrieren:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* auto-fit */
/* ODER */
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* auto-fill */
width: 600px;
}
.item {
background-color: lightgrey;
border: 1px solid black;
padding: 10px;
}
In diesem vereinfachten Beispiel würde bei nur zwei Elementen im Grid auto-fit dazu führen, dass sich die Spalten dehnen, um die 600px Breite auszufüllen, sodass beide Spalten jeweils 300px breit sind. Andererseits würde die Verwendung von auto-fill zwei 150px breite Spalten mit zwei leeren 150px breiten Spalten an der Seite erstellen, da nur 2 der 4 Spalten zur Aufnahme der Elemente verwendet werden.
Die wichtigste Erkenntnis ist, dass auto-fit leere Spuren einklappt, während auto-fill sie leer lässt. Wählen Sie das Schlüsselwort, das am besten zu Ihren Layout-Anforderungen passt. Im Allgemeinen wird auto-fit verwendet, wenn Sie möchten, dass sich die Elemente ausdehnen, um den verfügbaren Platz auszufüllen, und auto-fill wird verwendet, wenn Sie leere Spuren für Abstände oder visuelle Effekte erstellen müssen oder wenn Sie sicherstellen möchten, dass der gesamte verfügbare Platz entweder durch Inhalt oder leere Bereiche genutzt wird.
Überlegungen zur Barrierefreiheit
Bei der Verwendung der automatischen Platzierung ist es entscheidend, die Barrierefreiheit zu berücksichtigen. Die Reihenfolge der Elemente im HTML-Quellcode bestimmt die Lesereihenfolge für Screenreader. Wenn Sie `grid-auto-flow: dense;` verwenden oder Elemente mit anderen Grid-Eigenschaften erheblich neu anordnen, kann dies die logische Lesereihenfolge potenziell unterbrechen. Testen Sie immer mit einem Screenreader, um sicherzustellen, dass der Inhalt in einer logischen und verständlichen Reihenfolge präsentiert wird.
Hier sind einige wichtige Aspekte, um die globale Barrierefreiheit zu gewährleisten:
- Logische Quellreihenfolge: Behalten Sie nach Möglichkeit die Quellreihenfolge Ihrer HTML-Elemente logisch bei. Dies wird in der Regel eine klare Lesereihenfolge für Screenreader beibehalten.
- Mit Screenreadern testen: Testen Sie Ihre Layouts gründlich mit Screenreadern (z. B. VoiceOver unter macOS, NVDA unter Windows), um zu bestätigen, dass der Inhalt korrekt angesagt wird.
- Semantisches HTML: Verwenden Sie semantische HTML-Elemente (
<article>,<nav>,<aside>,<main>,<header>,<footer>usw.), um eine klare Struktur und Bedeutung für Screenreader bereitzustellen. - Alternativtext (alt-Text): Geben Sie immer beschreibenden Alternativtext für Bilder an.
- ARIA-Attribute: Verwenden Sie ARIA-Attribute (z. B.
aria-label,aria-describedby), um bei Bedarf zusätzlichen Kontext bereitzustellen, vermeiden Sie jedoch eine übermäßige Nutzung. - Tastaturnavigation: Stellen Sie sicher, dass Ihre Layouts mit der Tastatur navigierbar sind. Benutzer sollten in der Lage sein, durch interaktive Elemente in einer logischen Reihenfolge zu tabben.
Leistung und Optimierung
Obwohl CSS Grid im Allgemeinen performant ist, gibt es einige Dinge zu beachten, um Ihre Layouts zu optimieren, insbesondere wenn Ihre Website wächst:
- Vermeiden Sie übermäßige Grid-Spuren: Vermeiden Sie die Erstellung einer übermäßigen Anzahl von Grid-Spuren, insbesondere impliziten. Dies kann zu Leistungsproblemen führen. Planen Sie Ihre
grid-template-columnsundgrid-template-rowssorgfältig. - Reduzieren Sie komplexe Berechnungen: Minimieren Sie die Verwendung komplexer Berechnungen in Ihrem CSS. Browser-Engines sind für bestimmte Arten von Berechnungen optimiert und können Einschränkungen haben.
- Bilder optimieren: Optimieren Sie Bilder immer für die Webnutzung. Verwenden Sie geeignete Bildformate (z. B. WebP), komprimieren Sie Bilder und stellen Sie responsive Bildgrößen mit dem
<picture>-Element oder responsiven Bildtechniken bereit. Dies wirkt sich auf die wahrgenommene Ladezeit in allen Regionen aus. - CSS minimieren und bündeln: Minimieren Sie Ihre CSS-Dateien und bündeln Sie sie, um die Anzahl der HTTP-Anfragen zu reduzieren. Erwägen Sie die Verwendung eines CSS-Präprozessors wie Sass oder Less für eine bessere Organisation und Wartbarkeit.
- Auf echten Geräten testen: Testen Sie Ihre Layouts auf einer Vielzahl von Geräten und Browsern, einschließlich älterer und leistungsschwächerer Geräte sowie Geräten, die in verschiedenen geografischen Standorten häufig verwendet werden. Testen Sie unter verschiedenen Netzwerkbedingungen.
Überlegungen zur Internationalisierung (i18n) und Lokalisierung (l10n)
Wenn Sie Websites für ein globales Publikum erstellen, sollten Sie Internationalisierung (i18n) und Lokalisierung (l10n) berücksichtigen. So kann die automatische Platzierung dies beeinflussen:
- Textrichtung (LTR/RTL): Berücksichtigen Sie, dass einige Sprachen (z. B. Arabisch, Hebräisch) von rechts nach links (RTL) geschrieben werden. Verwenden Sie die Eigenschaften
directionundtext-alignkorrekt, um RTL-Layouts zu handhaben. CSS Grid ist von Natur aus an RTL anpassbar, aber Sie müssen sicherstellen, dass sich Ihr Layout korrekt verhält. - Inhaltslänge: Inhalte in verschiedenen Sprachen können unterschiedliche Längen haben. Gestalten Sie Ihre Layouts so, dass sie unterschiedliche Textlängen aufnehmen können, insbesondere bei Überschriften und Beschreibungen. Verwenden Sie `minmax()`, um sicherzustellen, dass der Inhalt in die Gitterzellen passt.
- Schriftunterstützung: Stellen Sie sicher, dass Ihre Website Schriftarten verwendet, die die von Ihnen anvisierten Sprachen unterstützen. Stellen Sie bei Bedarf Schriftart-Fallbacks bereit. Erwägen Sie die Verwendung von Google Fonts oder anderen Webfont-Diensten, die eine breite Sprachunterstützung bieten.
- Währungs- und Zahlenformatierung: Wenn Sie Preise oder Zahlen anzeigen, formatieren Sie diese entsprechend dem Gebietsschema des Benutzers. Verwenden Sie die entsprechenden Währungssymbole und Zahlenformate.
- Datums- und Zeitformatierung: Zeigen Sie Daten und Zeiten in einem Format an, das für die Region des Benutzers geeignet ist. Erwägen Sie die Verwendung einer Bibliothek zur Handhabung der Datums- und Zeitformatierung.
- Anpassbare Medien: Stellen Sie sicher, dass Ihre Layouts Medien (Bilder, Videos) aufnehmen, die möglicherweise lokalisiert werden müssen. Beispielsweise muss ein Bild mit Text möglicherweise in mehrere Sprachen übersetzt werden.
Fortgeschrittene Techniken und Überlegungen
Benannte Grid-Linien
Benannte Grid-Linien können Ihren Code lesbarer und wartbarer machen. Sie können Grid-Linien bei der Definition Ihrer Grid-Vorlage benennen, wodurch Sie die Namen anstelle von Zahlen verwenden können, um auf die Grid-Linien bei der Positionierung von Elementen zu verweisen. Dies ist bei komplexen Layouts von Vorteil.
.grid-container {
display: grid;
grid-template-columns: [col-start] 1fr [col-mid] 1fr [col-end];
}
.item-one {
grid-column: col-start / col-end;
}
Verschachtelte Grids
CSS Grid ermöglicht es Ihnen, Grid-Container innerhalb von Grid-Elementen zu verschachteln. Dies gibt Ihnen eine größere Kontrolle über das Layout komplexer Abschnitte innerhalb Ihres gesamten Grids. Dies ermöglicht komplexe Layouts und modulares Design.
<div class="grid-container">
<div class="grid-item">
<div class="nested-grid">
<div class="nested-item">Element 1</div>
<div class="nested-item">Element 2</div>
</div>
</div>
</div>
.nested-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
Kombination von Grid mit anderen Layout-Methoden
CSS Grid funktioniert gut mit anderen Layout-Methoden wie Flexbox. Sie können Flexbox für eine feinere Kontrolle innerhalb eines Grid-Elements verwenden. Die Verwendung eines hybriden Ansatzes ermöglicht eine größere Kontrolle und Flexibilität. Zum Beispiel Flexbox für die horizontale Ausrichtung und Grid für die vertikale Ausrichtung usw.
Fazit
Die Auto-Placement-Funktionen von CSS Grid sind ein leistungsstarkes Werkzeug zur Erstellung dynamischer und responsiver Layouts, die sich nahtlos an verschiedene Bildschirmgrößen und Inhaltsvarianten anpassen. Durch das Verständnis der verschiedenen Auto-Placement-Algorithmen, Eigenschaften und Best Practices können Sie flexible und wartbare Websites für ein globales Publikum erstellen. Denken Sie daran, Barrierefreiheit, Leistung und Internationalisierung während des gesamten Design- und Entwicklungsprozesses zu berücksichtigen. Die Beherrschung dieser Techniken befähigt Sie, moderne Weberlebnisse zu schaffen, die auf jedem Gerät, für jeden Benutzer, weltweit großartig aussehen.
Üben und experimentieren Sie weiter mit verschiedenen Grid-Layouts. Je mehr Sie CSS Grid verwenden, desto kompetenter werden Sie. Bleiben Sie auf dem Laufenden über die neuesten CSS-Grid-Spezifikationen, da es sich weiterentwickelt und noch mehr aufregende Möglichkeiten für das Webdesign bietet.